<template>
	<page :nav="false" ref="pageRef" custom-class="paddingB10 relative" @click="clickPage">
		<view class="pagae-nav" :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }">
			<view class="flex-column-align-center nav-title">宝箱</view>
		</view>
		<view class="boxPage" :style="{ backgroundImage: 'url(' + ossurl.box.boxPageBg + ')' }">
			<view class="seizeSeet" :style="{ paddingTop: statusBarHeight + 40 + 'px' }"></view>

			<view class="headerBox" :style="{ backgroundImage: 'url(' + ossurl.box.boxBg1 + ')' }">
				<view class="searchBox">
					<view class="searchInput">
						<input type="text" confirm-type="search" placeholder="搜索你感兴趣的～" v-model.trim="keyword"
							placeholder-style="color:#A27400;font-size:12px;" @confirm="getData()" />
						<text class="cuIcon-search" @click="getData()"></text>
					</view>
					<view class="ruleBtn" @click="showView({ url: '/pages/message/index', login: false })">
						<image :src="ossurl.box.ruleBtn" mode="widthFix" style="height: 27rpx" />
					</view>
				</view>
				<view class="userBox" :style="{ backgroundImage: 'url(' + ossurl.box.userBg + ')' }">
					<view class="avatar">
						<image class="avatarImg" :src="user ? user.avatar : ossurl.common.noavatar" />
					</view>
					<view class="userName" v-if="user">
						{{ user.nickname }}
					</view>
					<view class="numList" v-if="user">
						<view class="item" @click="showView({ url: '/pages/magic/index', login: true })"
							v-if="rockShow">
							<view class="numBox">
								{{ showNumber('magicBalance') }}
							</view>
							<view class="numTitle">源石</view>
						</view>
						<view class="item" @click="showView({ url: '/pages/coupon/index', login: true })">
							<view class="numBox">
								{{ showNumber('couponCount') }}
							</view>
							<view class="numTitle">优惠券</view>
						</view>
						<view class="item" @click="showView({ url: '/pages/store/index', login: true })">
							<view class="numBox">
								{{ showNumber('inventoryCount') }}
							</view>
							<view class="numTitle">仓库</view>
						</view>
					</view>
				</view>

				<view>
					<view class="flex-align-center flex-center marginB10"></view>

					<view>
						<view class="marginT10">
							<barrage ref="barrage1" />
						</view>
						<view class="marginT5">
							<barrage :left="50" ref="barrage2" />
						</view>
					</view>
				</view>
			</view>

			<view class="tabList" :style="{ backgroundImage: 'url(' + ossurl.box.tabBg + ')' }">
				<image class="tabItem" :src="tabValue == '' ? ossurl.box.allActive : ossurl.box.all"
					style="width: 155rpx" mode="widthFix" @click="changeTab('')" />
				<image class="tabItem" :src="tabValue === 'UNLIMITED' ? ossurl.box.superActive : ossurl.box.super"
					style="width: 155rpx" @click="changeTab('UNLIMITED')" mode="widthFix" />
				<image class="tabItem" :src="tabValue === 'YFS_PRO' ? ossurl.box.yfsActive : ossurl.box.yfs"
					style="width: 155rpx" @click="changeTab('YFS_PRO')" mode="widthFix" />
				<image class="tabItem" :src="tabValue === 'ARENA' ? ossurl.box.arenaActive : ossurl.box.arena"
					style="width: 155rpx" @click="changeTab('ARENA')" mode="widthFix" />
			</view>
			<view class="relative itemList" style="height: 100%">
				<view v-for="item in list" :key="item.id" class="item2 flex-column-center" @click="showDetail(item)">
					<view class="relative itemBox">
						<div class="itemTag">
							<image v-if="item.mode === 'UNLIMITED'" :src="ossurl.box.cj"></image>
							<image v-else-if="item.mode === 'YFS_PRO'" :src="ossurl.box.yf"></image>
							<image v-else-if="item.mode === 'ARENA'" :src="ossurl.box.arena"></image>
						</div>
						<image class="itemImage" mode="aspectFill" :src="item.cover"></image>
						<view class="itemText">
							{{ item.name }}
							<view class="itemPrice">
								<span class="unit">¥</span>
								&nbsp;{{ item.price }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<coupon-com ref="couponRef" @success="refresh" />
			<poster ref="posterRef" />
			<activity ref="activityRef" @success="getIndex" />
			<view v-if="filterMoneyVisible" class="filter-list-wrapper"
				:style="{ left: filterMoneyStyle.left, top: filterMoneyStyle.top }">
				<view v-for="item in filterMoneys" :key="item.label" @click.stop="chooseMoneyFilter(item)"
					class="cell flex-align-center">
					{{ item.label }}
				</view>
			</view>
			<view v-if="filterTypeVisible" class="filter-list-wrapper"
				:style="{ left: filterTypeStyle.left, top: filterTypeStyle.top }">
				<view v-for="item in filterTypes" :key="item.label" @click.stop="chooseTypeFilter(item)"
					class="cell flex-align-center">
					{{ item.label }}
				</view>
			</view>
			<popularize-com ref="popularizeRef" />
			<view v-if="floorstatus" class="goTop" @click="goTop">
				<image :src="ossurl.common.topBtn" class="goTopImg" />
			</view>

			<activity-list ref="activityListRef" />
			<image class="receiveBenefits" :src="ossurl.box.receiveBenefits" @click="gotoWeb()" mode="widthFix" />
		</view>
		<view class="turntableBtnBox" v-if="residue&&residue.total>0">
			<image class="turntableBtn" :src="ossurl.box.turntableBtn" @click="gotoTurntable()" mode="widthFix" />
			<view class="numBox">

				<view class="num">可转{{ user.credit/turntable.consumeCredit }}次</view>
			</view>
		</view>
		<view v-if="adList && adList.length > 0">
			<adDialog v-for="(item, index) of adList" :adInfo="item" :key="index"></adDialog>
		</view>
	</page>
</template>

<script>
	import barrage from './barrage'
	import loginMixin from '@/mixin/login'
	import store from '@/store'
	import {
		SET_PID
	} from '@/store/mutation-types'
	import couponCom from './coupon'
	import top from './top'
	import poster from './poster'
	import activity from './activity'
	import banner from './banner'
	import activityList from './activity_tab'
	import popularizeCom from './../center/poster.vue'
	import {
		SET_SHARE_USERID
	} from '@/store/mutation-types'
	import ossurl from '@/utils/ossurl'
	import adDialog from './adDialog.vue'
	const FILTER_MONEY = [{
			label: '全部价格'
		},
		{
			label: '￥0 ~ ￥9.9',
			priceMin: '0',
			priceMax: '9.9'
		},
		{
			label: '￥10 ~ ￥19.9',
			priceMin: '9.9',
			priceMax: '19.9'
		},
		{
			label: '大于 ￥19.9',
			priceMin: '19.9'
		}
	]
	const FILTER_TYPE = [{
			label: '全部模式'
		},
		{
			label: '无限',
			value: 'UNLIMITED'
		},
		{
			label: '一番赏Pro',
			value: 'YFS_PRO'
		},
		{
			label: '擂台',
			value: 'ARENA'
		}
	]
	export default {
		components: {
			barrage,
			couponCom,
			top,
			poster,
			activity,
			banner,
			popularizeCom,
			activityList,
			adDialog
		},
		data() {
			return {
				keyword: '',
				ossurl,
				list: [],
				horse1: [],
				horse2: [],
				requestTime: null,
				requestActivityTime: false,
				indexData: null,
				notice: null,
				tabValue: '',
				filterMoneys: FILTER_MONEY,
				filterMoney: FILTER_MONEY[0],
				filterMoneyStyle: {},
				filterMoneyVisible: false,
				filterTypes: FILTER_TYPE,
				filterType: FILTER_TYPE[0],
				filterTypeStyle: {},
				filterTypeVisible: false,
				floorstatus: false,
				scrollTop: 0,
				residue: null,
				turntable: null,
				user: null
			}
		},
		computed: {

			headerBg() {
				return this.scrollTop > 0 ? '#fff' : 'transparent'
			},
			statusBarHeight() {
				if (this.$store.state.systemInfo) {
					return this.$store.state.systemInfo.statusBarHeight
				}
				return 20
			},
			hide() {
				return !this.$store.state.hide
			},
			tabList() {
				return this.$store.state.pageConfig['index_icon'].components[0].elements
			},
			adList() {
				return this.$store.state.pageConfig['super_ad'] ? this.$store.state.pageConfig['super_ad'].components[0]
					.elements : []
			},
			boxBanner() {
				return this.$store.state.pageConfig['box_banner'] ? this.$store.state.pageConfig['box_banner'].components[
					0].elements : []
			},
			banners() {
				if (!this.$store.state.pageConfig || !this.$store.state.pageConfig['magic_luck']) {
					return null
				}
				let components = this.$store.state.pageConfig['magic_luck'].components
				if (!components || components.length === 0) return null
				let data = null
				for (let i = 0; i < components.length; i++) {
					if (components[i].type === 'capsule') {
						data = components[i].elements
					}
				}
				return data
			},
			rockShow() {
				let val = false
				val = uni.getStorageSync('rockShow')
				return val
			}
		},
		onLoad(options) {
			if (options.scene) {
				var param = options.scene.split('%3A')
				store.commit(SET_SHARE_USERID, param[1])
				// this.$store.state.shareUserId
			}
			this.appShow()
			this.$event.on(this.$event.key.APP_SHOW, this.appShow)
			this.$event.on(this.$event.key.LOGIN, this.afterLogin)
			this.$event.on(this.$event.key.AWARD_REFRESH, this.refresh)
		},
		onUnload() {
			this.$event.off(this.$event.key.APP_SHOW)
			this.$event.off(this.$event.key.LOGIN)
			this.$event.off(this.$event.key.AWARD_REFRESH)
		},
		mounted() {},
		onReady() {
			// setTimeout(() => {
			//     this.initFilterPosition()
			// }, 500)
			console.log(this.$refs)
		},
		onShow() {
			this.init(true)
			if (this.user && this.user.userId) {
				this.getInfo()
			}
		},
		onPullDownRefresh() {
			this.init(true)
		},
		onShareAppMessage(res) {
			return {
				title: '超级玛特 次元聚集地，潮玩新势力',
				path: '/pages/award/index'
			}
		},
		onShareTimeline() {
			return {
				title: '超级玛特 次元聚集地，潮玩新势力',
				imageUrl: this.list[0].cover
			}
		},
		// 获取滚动条当前位置
		onPageScroll(e) {
			let isTop = e.scrollTop > 100
			this.floorstatus = isTop ? true : false
			this.scrollTop = e.scrollTop
		},
		methods: {

			gotoRoute(item) {
				this.visible = false
				this.$common.showNext(item)
			},
			initFilterPosition() {
				this.initFilterPositionItem('filterMoney', 'filterMoneyStyle')
				this.initFilterPositionItem('filterType', 'filterTypeStyle')
			},
			initFilterPositionItem(className, key) {
				const el1 = uni.createSelectorQuery().in(this)
				el1.select(`.${className}`)
					.boundingClientRect((el) => {
						this[key] = {
							left: el.left - (132 - el.width) / 2 + 'px',
							top: el.top + el.height + 1 + 'px'
						}
					})
					.exec()
			},
			async appShow() {
				await this.initNewPeople()
				this.showPopularize()
				this.initCoupon()

				// const res = this.$cache.get(this.$cache.key.POSTER)
				// if (!res || res < 3) {
				//     setTimeout(() => {
				//         this.$refs.posterRef && this.$refs.posterRef.show()
				//     }, 600)
				//     this.$cache.set(this.$cache.key.POSTER, res ? res + 1 : 1)
				// }
			},
			async initNewPeople() {
				let now = new Date().getTime()
				if (this.requestActivityTime && now - this.requestActivityTime < 2 * 60 * 1000) {
					return false
				}
				let NEW_PEOPLE = this.$cache.get(this.$cache.key.NEW_PEOPLE)
				if (!NEW_PEOPLE) {
					const res = await this.$service.weal.activity()
					if (res) {
						this.$cache.set(this.$cache.key.NEW_PEOPLE, true)
						this.$refs.activityRef.show(res)
					}
				}
				return true
			},
			showPopularize() {
				let num = this.$cache.get(this.$cache.key.POPULARIZE)
				let flag =
					this.banners &&
					this.banners.some((item) => {
						return (
							item.path && item.path.params && item.path.params.url === 'popularize'
						)
					})
				if (!num && flag) {
					this.$refs.popularizeRef.show()
					this.$cache.set(this.$cache.key.POPULARIZE, (num || 0) + 1)
				}
			},
			gotoWeb() {
				const url =
					'https://mp.weixin.qq.com/s?__biz=MzkzMTU2ODM4MQ==&mid=2247483786&idx=1&sn=b8fb65d562c3778881101d0e194bd5aa&chksm=c2684e18f51fc70ea3140fa1145adabed0d7203928d0b36431e425f9360fd66d4ed173f60870#rd'
				this.$router.web(url, '领福利')
			},
			async initCoupon() {
				const res = await this.$service.wallet.targetCoupon('LUCK', null, false)
				if (res && res.length > 0) {
					this.$refs.couponRef.show(res)
				}
			},
			changeTab(value) {
				this.tabValue = value
				this.refresh()
			},
			afterLogin() {
				this.refresh()
				if (this.$refs.couponRef && this.$refs.couponRef.refresh) {
					this.$refs.couponRef.refresh()
				}
			},
			refresh() {
				this.init(true)
			},
			init(flag = false) {
				this.getIndex()
				let now = new Date().getTime()
				if (!flag && this.requestTime && now - this.requestTime < 10 * 60 * 1000) {
					uni.stopPullDownRefresh()
					return
				}
				this.requestTime = now
				this.getData()
				this.getHorse()
				this.getNotice()
				this.getInfo()
			},
			async getInfo() {
				const res = await this.$service.user.getInfo()
				this.user = res

				this.getTurntable()
			},
			async getData(loading = false) {
				const res = await this.$service.award.list({
						mode: this.tabValue,
						keyword: this.keyword
					},
					null,
					null,
					loading
				)
				uni.stopPullDownRefresh()
				this.list = res
			},
			async getHorse() {
				const res = await this.$service.award.horse()
				if (res && res.length > 0) {
					let middle = parseInt(res.length / 2 + 0.5)
					this.horse1 = res.slice(0, res.length)
					this.horse2 = res.slice(middle)
					this.$refs.barrage1 && this.$refs.barrage1.start(this.horse1)
					this.$refs.barrage2 && this.$refs.barrage2.start(this.horse2)
				}
			},
			async getIndex() {
				if (!this.$common.isLogin()) {
					this.indexData = null
					return
				}
				const res = await this.$service.award.magicIndex()
				this.indexData = res
			},
			async getNotice() {
				const res = await this.$service.base.message(1, 3, 'NOTICE')
				this.notice = res
			},
			showDetail(item) {
				if (item.status !== 1) return
				if (item.mode === 'UNLIMITED') {
					this.$router.push('award_detail', {
						poolId: item.id
					})
				} else if (item.mode === 'YFS_PRO') {
					this.$router.push('award_detail_yfs', {
						poolId: item.id
					})
				} else if (item.mode === 'ARENA') {
					this.$router.push('arena', {
						poolId: item.id
					})
				}
			},
			showKefu() {
				console.log(1)
				this.$common.showKefu()
			},
			back() {
				this.$router.back()
			},
			showNumber(key) {
				if (!this.indexData) return '-'
				if (typeof this.indexData[key] === 'undefined') return '-'
				const val = this.bigNumberTransform(this.indexData[key])
				return val
			},
			bigNumberTransform(value) {
				const newValue = ['', '', '']
				let fr = 1000
				let num = 3
				let text1 = ''
				let fm = 1
				while (value / fr >= 1) {
					fr *= 10
					num += 1
					// console.log('数字', value / fr, 'num:', num)
				}
				if (num <= 4) {
					// 千
					newValue[0] = parseInt(value / 1000) + ''
					newValue[1] = '千'
				} else if (num <= 8) {
					// 万
					text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
					// tslint:disable-next-line:no-shadowed-variable
					fm = text1 === '万' ? 10000 : 10000000
					if (value % fm === 0) {
						newValue[0] = parseInt(value / fm) + ''
					} else {
						newValue[0] = Math.floor(parseFloat(value / fm) * 10) / 10 + ''
					}
					newValue[1] = text1
				} else if (num <= 16) {
					// 亿
					text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
					text1 = (num - 8) / 4 > 1 ? '万亿' : text1
					text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
					// tslint:disable-next-line:no-shadowed-variable
					fm = 1
					if (text1 === '亿') {
						fm = 100000000
					} else if (text1 === '千亿') {
						fm = 100000000000
					} else if (text1 === '万亿') {
						fm = 1000000000000
					} else if (text1 === '千万亿') {
						fm = 1000000000000000
					}
					if (value % fm === 0) {
						newValue[0] = parseInt(value / fm) + ''
					} else {
						newValue[0] = Math.floor(parseFloat(value / fm) * 10) / 10 + ''
					}
					newValue[1] = text1
				}
				if (value < 1000) {
					newValue[0] = value + ''
					newValue[1] = ''
				}
				return newValue.join('')
			},
			showMoneyVisible() {
				if (this.filterMoneyVisible) {
					this.filterMoneyVisible = false
					return
				}
				if (this.filterMoneyStyle && this.filterMoneyStyle.top) {
					this.filterMoneyVisible = true
					this.filterTypeVisible = false
				}
			},
			showTypeVisible() {
				if (this.filterTypeVisible) {
					this.filterTypeVisible = false
					return
				}
				if (this.filterTypeStyle && this.filterTypeStyle.top) {
					this.filterTypeVisible = true
					this.filterMoneyVisible = false
				}
			},
			chooseMoneyFilter(item) {
				this.filterMoney = item
				this.filterMoneyVisible = false
				this.getData(true)
			},
			chooseTypeFilter(item) {
				this.filterType = item
				this.filterTypeVisible = false
				this.getData(true)
			},
			clickPage() {
				this.filterMoneyVisible = false
				this.filterTypeVisible = false
			},
			async getTurntable() {
				const turntable = await this.$service.award.getTurntable()
				this.turntable = turntable
				if(turntable&&turntable.id){
					const res = await this.$service.award.getResidue({
						activityId: turntable.id
					})
					this.residue = res
				}
				
			},
			gotoTurntable() {
				uni.navigateTo({
					url: '/subPackages/pages/turntable/index',
				});
			},
			//回到顶部
			goTop: function(e) {
				// 一键回到顶部
				if (wx.pageScrollTo) {
					wx.pageScrollTo({
						scrollTop: 0
					})
				} else {
					wx.showModal({
						title: '提示',
						content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
					})
				}
			},
			onActivity() {
				this.$refs.activityListRef.show()
			}
		}
	}
</script>
<style></style>
<style lang="scss" scoped>
	.boxPage {
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.headerBox {
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding: 100rpx 36rpx 24rpx 36rpx;

		.searchBox {
			display: flex;
			align-items: center;
		}

		.searchInput {
			height: 64rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 64rpx;
			color: #000;
			display: flex;
			flex: 1;
			align-items: center;
			padding: 0 24rpx;
			margin-right: 30rpx;

			.cuIcon-search {
				color: #d0ab4f;
			}

			input {
				flex: 1;
			}
		}

		.ruleBtn {
			width: 138rpx;

			image {
				width: 138rpx;
			}
		}

		.userBox {
			width: 680rpx;
			height: 162rpx;
			background-size: 680rpx 162rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			padding-left: 40rpx;

			.avatar {
				.avatarImg {
					width: 82rpx;
					height: 82rpx;
					opacity: 1;
					border: 6rpx solid #fec433;
					border-radius: 50%;
				}
			}

			.userName {
				font-size: 28rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: bold;
				color: #000000;
				line-height: 44rpx;
				padding: 0 28rpx;
				border-right: 2rpx solid #f1c845;
			}

			.numList {
				display: flex;
				flex: 1;
				padding-left: 28rpx;
				text-align: center;

				.item {
					flex: 1;
				}

				.numBox {
					font-size: 32rpx;
					font-family: Rousseau Deco, Rousseau Deco;
					font-weight: bold;
					color: #000000;
					line-height: 44rpx;
				}

				.numTitle {
					font-size: 24rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 350;
					color: #c88f00;
				}
			}
		}
	}

	.bg {
		position: fixed;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.pagae-nav {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 100;
		transition: 0.2s;
	}

	.nav-title {
		height: 80rpx;
		font-size: 32rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: bold;
		color: #000000;
	}

	.tabList {
		padding: 0 22rpx;

		.tabItem {
			margin-right: 24rpx;
			height: 150rpx;

			&:last-child {
				margin: 0;
			}
		}
	}

	.item1 {
		height: 240rpx;
		width: 100%;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;

		padding: 1rpx;

		// .frame {
		//     position: absolute;
		//     left: 1rpx;
		//     right: 1rpx;
		//     top: 1rpx;
		//     height: 238rpx;
		// }
		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}
	}

	.itemList {
		padding: 0rpx 4rpx 80rpx 4rpx;
	}

	.item2 {
		width: 50%;
		position: relative;
		margin: auto;
		display: inline-block;
		padding: 16rpx;

		.itemBox {
			font-size: 0;
			width: 100%;
			margin-bottom: 5rpx;

			.itemImage {
				border-radius: 14rpx;
				width: 338rpx;
				height: 402rpx;
			}

			.itemTag {
				position: absolute;
				z-index: 1;
				top: 12rpx;
				right: 12rpx;

				image {
					width: 112rpx;
					height: 64rpx;
				}
			}

			.itemText {
				font-size: 28rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 350;
				color: rgba(0, 0, 0, 0.85);
				padding: 20rpx;
			}

			.itemPrice {
				color: #ff0000;
				font-size: 24rpx;
				font-family: Rousseau Deco, Rousseau Deco;
				font-weight: 400;
				margin-top: 10rpx;

				.unit {
					font-size: 24rpx;
					margin-right: 4rpx;
				}
			}
		}

		.frame {
			position: absolute;
			left: 0;
			top: 0;
			height: 600rpx;
			width: 100%;
		}

		.image {
			width: 100%;
			height: 360rpx;
			border-radius: 20rpx;
		}

		.image-flag {
			position: absolute;
			left: 0;
			bottom: 20rpx;
			width: 218rpx;
			height: 20rpx;
		}

		.content {
			position: absolute;
			left: 2rpx;
			right: 2rpx;
			bottom: 20rpx;

			padding: 0 20rpx;

			.btn {
				margin-left: 20rpx;
				padding: 0 28rpx;
				height: 60rpx;
				line-height: 60rpx;
				// background: #fff;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
				font-weight: bold;

				&.disable {
					background: #ccc;
				}
			}
		}

		.status {
			width: 110rpx;
			height: 110rpx;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 100;
		}

		.mode {
			position: absolute;
			left: 0;
			top: 0;
			padding: 0 20rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
			background: #49ffff;
			border-radius: 8px 0px 8px 0px;
		}

		.mask {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);
		}
	}

	.filter-wrapper {
		width: 226rpx;
		height: 72rpx;
		position: relative;
		overflow: hidden;

		.image {
			position: absolute;
			left: 0;
			top: 0;
			width: 226rpx;
			height: 72rpx;
		}

		.text {
			color: #e0f2ff;
			font-size: 24rpx;
			position: relative;
		}

		.group-btn {
			// position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
		}

		.arrow {
			width: 12rpx;
			height: 6rpx;
			margin-left: 6px;
			// position: absolute;
			// right: 30rpx;
		}
	}

	.filter-list-wrapper {
		position: absolute;
		width: 132px;
		background: rgba(0, 0, 0, 0.8);
		box-shadow: 0px 0px 8rpx 0px rgba(73, 255, 255, 0.5);
		border-radius: 12rpx;
		border: 1px solid rgba(174, 231, 255, 0.5);
		z-index: 1500;
		padding: 8px 0;

		.cell {
			height: 27px;
			text-align: center;
			color: #e0f2ff;
			font-size: 24rpx;
		}
	}

	.goTop {
		position: fixed;
		bottom: 120rpx;
		right: 9rpx;
		height: 98rpx;
		width: 68rpx;
		z-index: 1000;

		.goTopImg {
			height: 98rpx;
			width: 68rpx;
		}
	}

	.receiveBenefits {
		position: fixed;
		bottom: 240rpx;
		right: 0;
		width: 152rpx;
		height: 156rpx;
		z-index: 1000;
	}

	.active_list {
		position: fixed;
		right: 10rpx;
		bottom: 480rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.group_gift {
		position: fixed;
		right: 14rpx;
		bottom: 210rpx;
		width: 100rpx;
		height: 130rpx;
		overflow: hidden;

		.group-btn {
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
		}
	}

	.rule {
		width: 520rpx;

		// animation: scroll 3s linear infinite; /* 关键帧动画 */
		.rule-text {
			// overflow: hidden;
			overflow: hidden;
			white-space: nowrap;
			/* 防止文字换行 */
			text-overflow: ellipsis;
			/* 超出显示省略号 */
			white-space: nowrap;
			/* 防止文字换行 */
			// animation: scroll 15s linear infinite; /* 关键帧动画 */
		}

		@keyframes scroll {
			from {
				-webkit-transform: translateX(100%);
				transform: translateX(100%);
			}

			to {
				-webkit-transform: translateX(-300%);
				transform: translateX(-300%);
			}
		}
	}

	.bannerSwiper {
		width: 650rpx;
		height: 220rpx;
		padding: 20rpx 0;

		.bannerBox {
			border-radius: 14rpx;
			overflow: hidden;
			line-height: 0;
			font-size: 0;

			.image {
				width: 650rpx;
				height: 180rpx;
			}
		}
	}

	.turntableBtnBox {
		position: fixed;
		top: 550rpx;
		right: 9rpx;

		z-index: 1000;

		.numBox {
			position: absolute;
			bottom: 8rpx;
			display: flex;
			left: 0;
			right: 0;
			align-items: center;
			height: 34rpx;
			padding: 0 5rpx;
			justify-content: center;
			.progressBar {
				background-color: #fff;
				flex: 1;
				height: 14rpx;
				border-radius: 7rpx;
				width: 1px;
				padding: 2rpx;
				max-width: 100%;

				.bar {
					width: 0%;
					height: 100%;
					background: linear-gradient(90deg, #ff2b00 0%, #ffb200 100%);
					box-shadow: inset 0rpx 0rpx 2rpx 0rpx #ffffff;
					border-radius: 97rpx 97rpx 97rpx 97rpx;
				}
			}

			.num {
				color: #fff;
				font-size: 20rpx;
			}
		}
	}

	.turntableBtn {
		height: 118rpx;
		width: 104rpx;
	}
</style>